<template>
    <div class="bottomcontanier">
        <ul>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xinxi"></use>
                </svg>
                <div>{{SongDetails.commentCount}}</div>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div>{{SongDetails.shareCount}}</div>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div>下载</div>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-duoxuankuang"></use>
                </svg>
                <div>多选</div>
            </li>
        </ul>
    </div>
</template>

<script>
import { SongDetails } from '@/api';
export default {
    name: 'ItemDetailsbottom',
   
    setup(props){
        // console.log(props);
    },
    
    props:['SongDetails'],
};
</script>

<style lang="scss" scoped>
.bottomcontanier{
    width: 100%;
    ul{
        width: 100%;
        display: flex;

        li{
            width: 25%;
            text-align: center;
            font-size: .28rem;
            color: #fff;
            padding: .3rem 0;
        }
    }
}
</style>